<template>
  <div class="counter-warp">
    <p>Vuex counter：{{ count }}</p>
    <p>
      <i-button @click="increment">+</i-button>
      <button @click="decrement">-</button>
    </p>
    <div>{{msg}}</div>
    <button @click="set('我变了')">改变变量值</button>
  </div>
</template>

<script>
// Use Vuex

export default {
  data:{
    msg:"我是变量"
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  mounted(){
    // this.$apis.getIndexData().then((res)=>{
    //   console.log(res)
    // })
  },
  methods: {
    increment () {
      this.$store.commit('increment')
    },
    decrement () {
      this.$store.commit('decrement')
    },
    set(txt){
      this.msg=txt
    }
  }
}
</script>

<style>
.counter-warp {
  text-align: center;
  margin-top: 100px;
}
.home {
  display: inline-block;
  margin: 100px auto;
  padding: 5px 10px;
  color: blue;
  border: 1px solid blue;
}
</style>
